<template>
  <div class="ocr-recognition-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title">OCR文字识别</div>
        <div class="subtitle">AI智能识别古今文字</div>
      </div>
    </div>

    <!-- 路由导航 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/files">
            <FolderOutlined />
            档案文件管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/files/digital-archive">
            <ScanOutlined />
            纸质档案数字化
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <EyeOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <EyeOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">识别准确率</div>
              <div class="stat-value">{{ ocrStats.accuracy }}%</div>
              <div class="stat-label">平均准确率</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ThunderboltOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">处理速度</div>
              <div class="stat-value">{{ ocrStats.speed }}</div>
              <div class="stat-label">页/分钟</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <FileTextOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日识别</div>
              <div class="stat-value">{{ ocrStats.todayRecognized }}</div>
              <div class="stat-label">万字</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <BookOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">古文识别率</div>
              <div class="stat-value">{{ ocrStats.ancientTextAccuracy }}%</div>
              <div class="stat-label">古文专项</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能区域 -->
    <div class="function-section">
      <a-row :gutter="[24, 24]">
        <!-- 识别配置 -->
        <a-col :xs="24" :lg="8">
          <a-card title="识别配置" :bordered="false">
            <a-form layout="vertical">
              <a-form-item label="识别模式">
                <a-select v-model:value="ocrConfig.mode" placeholder="选择识别模式">
                  <a-select-option value="auto">自动识别</a-select-option>
                  <a-select-option value="modern">现代文字</a-select-option>
                  <a-select-option value="ancient">古文识别</a-select-option>
                  <a-select-option value="mixed">混合识别</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="识别语言">
                <a-select v-model:value="ocrConfig.language" mode="multiple" placeholder="选择语言">
                  <a-select-option value="zh-cn">简体中文</a-select-option>
                  <a-select-option value="zh-tw">繁体中文</a-select-option>
                  <a-select-option value="ancient">古汉语</a-select-option>
                  <a-select-option value="sanskrit">梵文</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="精度等级">
                <a-slider v-model:value="ocrConfig.precision" :min="1" :max="5" :marks="precisionMarks" />
              </a-form-item>

              <a-form-item>
                <a-button type="primary" block @click="startOCR">
                  <EyeOutlined />
                  开始识别
                </a-button>
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>

        <!-- 识别任务监控 -->
        <a-col :xs="24" :lg="16">
          <a-card title="识别任务监控" :bordered="false">
            <a-table :columns="ocrTaskColumns" :data-source="ocrTasks" :pagination="{ pageSize: 8 }" row-key="id" size="small">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">
                    {{ record.status }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'progress'">
                  <a-progress :percent="record.progress" size="small" :status="record.progress === 100 ? 'success' : 'active'" />
                </template>
                <template v-if="column.key === 'accuracy'">
                  <span :style="{ color: getAccuracyColor(record.accuracy) }"> {{ record.accuracy }}% </span>
                </template>
                <template v-if="column.key === 'action'">
                  <a-space>
                    <a-button size="small" @click="viewResult(record)">查看结果</a-button>
                    <a-button size="small" @click="reprocess(record)">重新处理</a-button>
                  </a-space>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 识别结果展示 -->
    <div class="result-section">
      <a-card title="识别结果展示" :bordered="false">
        <a-row :gutter="16">
          <a-col :span="12">
            <div class="result-panel">
              <h4>原始图像</h4>
              <div class="image-preview">
                <img :src="selectedImage" alt="原始图像" v-if="selectedImage" />
                <div v-else class="placeholder">
                  <FileImageOutlined />
                  <p>选择图像进行识别</p>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="result-panel">
              <h4>识别文本</h4>
              <div class="text-result">
                <a-textarea v-model:value="recognizedText" :rows="12" placeholder="识别结果将显示在这里..." readonly />
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <!-- 质量分析 -->
    <div class="quality-section">
      <a-card title="识别质量分析" :bordered="false">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="8" v-for="quality in qualityMetrics" :key="quality.id">
            <div class="quality-card">
              <div class="quality-header">
                <div class="quality-title">{{ quality.title }}</div>
                <div class="quality-score">{{ quality.score }}</div>
              </div>
              <a-progress :percent="quality.percentage" :stroke-color="quality.color" :show-info="false" />
              <div class="quality-description">{{ quality.description }}</div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, ScanOutlined, EyeOutlined, ThunderboltOutlined, FileTextOutlined, BookOutlined, FileImageOutlined } from '@ant-design/icons-vue'

// OCR统计
const ocrStats = reactive({
  accuracy: 96.8,
  speed: 45,
  todayRecognized: 156.7,
  ancientTextAccuracy: 94.2
})

// OCR配置
const ocrConfig = reactive({
  mode: 'auto',
  language: ['zh-cn'],
  precision: 3
})

// 精度等级标记
const precisionMarks = {
  1: '快速',
  2: '标准',
  3: '精确',
  4: '高精度',
  5: '极致'
}

// 表格列定义
const ocrTaskColumns = [
  { title: '任务ID', dataIndex: 'id', key: 'id', width: 120 },
  { title: '文件名', dataIndex: 'fileName', key: 'fileName' },
  { title: '页数', dataIndex: 'pageCount', key: 'pageCount', width: 80 },
  { title: '进度', key: 'progress', width: 120 },
  { title: '准确率', key: 'accuracy', width: 80 },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'action', width: 160 }
]

// OCR任务数据
const ocrTasks = ref([
  {
    id: 'OCR20231201001',
    fileName: '生死簿卷一.pdf',
    pageCount: 256,
    progress: 78,
    accuracy: 97.2,
    status: '识别中'
  },
  {
    id: 'OCR20231201002',
    fileName: '业力评定册.pdf',
    pageCount: 189,
    progress: 100,
    accuracy: 95.8,
    status: '已完成'
  },
  {
    id: 'OCR20231201003',
    fileName: '审判记录集.pdf',
    pageCount: 445,
    progress: 34,
    accuracy: 98.1,
    status: '识别中'
  }
])

// 选中的图像和识别文本
const selectedImage = ref('')
const recognizedText = ref('')

// 质量指标
const qualityMetrics = ref([
  {
    id: 1,
    title: '字符识别率',
    score: '97.2%',
    percentage: 97,
    color: '#52c41a',
    description: '单个字符识别准确度'
  },
  {
    id: 2,
    title: '词汇完整率',
    score: '94.8%',
    percentage: 95,
    color: '#1890ff',
    description: '完整词汇识别准确度'
  },
  {
    id: 3,
    title: '语义理解率',
    score: '91.3%',
    percentage: 91,
    color: '#722ed1',
    description: '语义上下文理解准确度'
  }
])

// 方法
const getStatusColor = (status) => {
  const colorMap = {
    识别中: 'processing',
    已完成: 'success',
    等待中: 'default',
    已暂停: 'warning',
    识别失败: 'error'
  }
  return colorMap[status] || 'default'
}

const getAccuracyColor = (accuracy) => {
  if (accuracy >= 95) return '#52c41a'
  if (accuracy >= 90) return '#faad14'
  return '#ff4d4f'
}

const startOCR = () => {
  console.log('开始OCR识别', ocrConfig)
}

const viewResult = (record) => {
  console.log('查看识别结果:', record)
}

const reprocess = (record) => {
  console.log('重新处理:', record)
}
</script>

<style lang="scss" scoped>
.ocr-recognition-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .header-content {
      .title {
        font-size: 28px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 14px;
        color: $text-secondary;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, $secondary-color, #f0c674);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
      }

      .stat-content {
        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 2px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  .function-section,
  .result-section,
  .quality-section {
    margin-bottom: 24px;

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .result-panel {
    .image-preview {
      height: 300px;
      border: 2px dashed rgba(212, 153, 10, 0.3);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .placeholder {
        text-align: center;
        color: $text-secondary;

        .anticon {
          font-size: 48px;
          margin-bottom: 16px;
        }
      }
    }

    .text-result {
      height: 300px;
    }
  }

  .quality-card {
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(212, 153, 10, 0.2);

    .quality-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .quality-title {
        font-size: 16px;
        font-weight: bold;
        color: $primary-color;
      }

      .quality-score {
        font-size: 20px;
        font-weight: bold;
        color: $secondary-color;
      }
    }

    .quality-description {
      margin-top: 8px;
      font-size: 14px;
      color: $text-secondary;
    }
  }
}
</style>
